import React from 'react';
import {numberHandle, safeMultiple, parsePercent} from '~/utils/number';

import CommonEchart from '../../common/CommonEchart';
import withPannel from './withPannel';

const tooltipCallback = params => {
    let name = '';
    const tooltipList = params.map((chartItem, index) => {
        const {marker, name: xAixsName, seriesName, value} = chartItem;
        name = xAixsName;
        let result = '';
        if (seriesName === '可续人数') {
            result = numberHandle(value, 2);
        } else {
            result = parsePercent(value, 2);
        }
        return `${marker} ${seriesName}: ${result}`;
    });
    return `${name}<br/>${tooltipList.join('<br />')}`;
};

const extendOptions = {
    tooltip: {
        trigger: 'axis',
        formatter: tooltipCallback
    },
    legend: {
        left: 'left'
    },
    xAxis: {
        common: {
            axisLabel: {
                // rotate: 30
            }
        }
    },
    yAxis: {
        newYAxis: [
            {
                name: '',
                type: 'value',
                axisLabel: {formatter: value => numberHandle(value, 1)}
            },
            {
                name: '',
                type: 'value',
                axisLabel: {formatter: value => `${safeMultiple(value, 100)}%`}
            }
        ],
        common: {
            splitLine: {show: false}
        }
    },
    grid: {
        left: 40,
        right: '3%',
        bottom: 20,
        containLabel: true
    },
    series: {
        newYAxis: [
            {
                yAxisIndex: 0,
                name: '可读人数'
            },
            {
                yAxisIndex: 1,
                name: '目标达成率'
            },
            {
                yAxisIndex: 1,
                name: '综合续班率'
            }
        ],
        common: {
            barMaxWidth: 30,
            barGap: '100%',
            barCategoryGap: '50%',
            // label: {show: true, position: 'top', formatter: labelFormatter},
        }
    }
};

const BardAndLineChart = props => {
    const {dataSource, unitId} = props;
    return <CommonEchart {...props} id={unitId} extendEchartsOptions={extendOptions} dataSource={dataSource} />;
};

export default withPannel(BardAndLineChart);
